import React from 'react'
const CouponInfo = () => {
    const [searchParams] = React.Router.useSearchParams();
    const cid = searchParams.get('cid') ? searchParams.get('cid') : 0;
    const [receivelist, setReceivelist] = React.useState([]);
    const [couponinfo, SetCouponInfo] = React.useState<any>({
        rate: '0'
    });

    React.useEffect(() => {
        GetCouponInfoData();
    },[cid])

    const GetCouponInfoData = async() =>
    {
        let result = await  React.HTTP.post('/coupon/info', {
            busid: React.Business.id,
            cid: cid
        });
        if(result.code == 1)
        {
            SetCouponInfo(result.data.couponinfo);
            setReceivelist(result.data.receive);
        }
    }

    // 领取
    const ReceiveEvent = () =>
    {
         React.UI.Dialog.confirm({
            content: '是否确认领取优惠券?',
            onConfirm: async() => 
            {
                // 判断用户是否登陆
               if(Object.getOwnPropertyNames(React.Business).length <= 0)
               {
                    React.error('请先去登陆', () => React.navigate('/business/login'));
                    return false;
               }

                let result = await React.HTTP.post('/coupon/receive', {
                    cid:cid,
                    busid: React.Business.id
                })
                if (result.code == 1) 
                {
                   
                    React.success(result.msg,
                        () => GetCouponInfoData()
                    )
                }
                else 
                {
                    React.error(result.msg)
                }


            }
        }).catch(() => {})
    }

    return (
        <>
            <link rel="stylesheet" href="/assets/css/coupon-info.css"></link>

            <React.UI.Image src={couponinfo.thumb_text} height={213} fit='cover' />

            {/* 通知 */}
            <React.UI.Swiper direction='vertical' style={{ '--height': '40px', 'border': '0px' }} loop={true} indicator={() => false} autoplay={true}>
                {
                    receivelist.map((item:any) =>{
                        return(
                            <React.UI.Swiper.Item key={item.id}>
                                <React.UI.NoticeBar content={item.business.mobile_text + '已领取'} color='info' style={{ 'border': '0px' }} />
                            </React.UI.Swiper.Item>
                        )
                    })
                }
            </React.UI.Swiper>

            <div className="coupon_detail">
                <div className="coupon_info">
                    <div className="left">
                        <div className="left_top">
                            <div>
                                <span>{parseFloat(couponinfo.rate) * 100}</span>折
                            </div>
                            <div className="top_info">
                                <div>优惠券</div>
                                <div>COUPON</div>
                            </div>
                        </div>
                    </div>
                    <div className="receive">
                        <React.UI.Button size='small' color='primary' disabled={couponinfo.receive} onClick={ReceiveEvent}>
                            {couponinfo.receive ? '已领取' : '领取'}
                        </React.UI.Button>
                    </div>
                </div>
                <div className="coupon_prompt">
                    <div className="prompt_title">温馨提示：</div>
                    <div><span>•</span>开始时间：{couponinfo.createtime_text}</div>
                    <div><span>•</span>结束时间：{couponinfo.endtime_text}</div>
                    <div><span>•</span>领取仅限量 {couponinfo.total} 张，赶快领取！</div>
                </div>
            </div>
        </>
    )
}

export default CouponInfo;